const Main = (function({
  Audio: {
    autoPlay
  }
}) {
  const dom = {
    pages: $all('.page'),
    watchHand: $('.watch-hand')
  }
  const data = {
    loadInterval: 300,
    page: 0,
    oldPage: 0
  }

  init()

  /**
   * 初始化
   */
  function init() {
    countDown()
    addIndex()
  }

  /**
   * 添加索引
   */
  function addIndex() {
    dom.pages.forEach((item, index) => {
      item.index = index
      if (index !== 0) {
        item.$hide()
      }
      // -------------------
      // item.$hide()
    })
  }

  /**
   * 倒计时
   */
  function countDown() {
    let i = 2019
    const min = i - 0
    const year = $('.year')
    let timer = setInterval(() => {
      year.innerText = i
      if (i < min) {
        dom.watchHand.style.animation = 'none'
        clearInterval(timer)
        next()
      }
      i--
    }, data.loadInterval)
  }

  /**
   * 下一页
   */
  function next() {
    data.oldPage = data.page
    data.page++
    changePage()
  }

  /**
   * 上一页
   */
  function prev() {
    const {
      oldPage,
      page
    } = data
    data.oldPage = page
    data.page = oldPage
    changePage()
  }

  /**
   * 跳转
   */
  function skip(page) {
    data.oldPage = data.page
    data.page = page
    changePage()
  }

  /**
   * 切换页面
   */
  async function changePage() {
    const {
      oldPage,
      page
    } = data
    const {
      pages
    } = dom

    console.log('old', oldPage)
    console.log('page', page)
    if (page === 1) {
      pages[oldPage].classList.add('fade-out')
      autoPlay()
    }
    pages[oldPage].$fadeOut()
    await pages[page].$fadeIn()
    enterPage(data.page)
  }

  function enterPage(page) {
    if (page === 1) p1()
    if (page === 2) p2()
    if (page === 3) p3()
    if (page === 4) p4()
    if (page === 5) p5()
    if (page === 6) p6()
  }

  async function p1() {
    const title = $('.p1 .title')
    const texts = $all('.p1 li')
    title.classList.add('trans-fade-in')
    await title.$transitionEnd()
    texts.forEach((item, i) => {
      item.style.transitionDelay = i * 0.5 + 's'
      item.classList.add('trans-fade-in')
    })
    await texts[texts.length - 1].$transitionEnd()
    setTimeout(next, 1000)
  }

  function p2() {
    const lis = $all('.p2 .body li')
    lis.forEach((item, i) => {
      item.children[0].style.transitionDelay = i + 's'
      item.children[1].style.transitionDelay = i + 's'
      item.children[0].classList.add('tr-op')
      item.children[1].classList.add('tr-op')
      item.onclick = () => skip(i + 3)
    })
  }

  function p3() {
    const lis = $all('.p3 .list li')
    const layer = $('.p3 .layer')
    const text = $('.p3 .layer .text')

    lis.forEach((item, i) => {
      item.classList.add('tr-op')
      item.addEventListener('click', async () => {
        text.innerText = p3Memory[i]
        await layer.$fadeIn()
        setTimeout(() => layer.$fadeOut(), 1000)
      })
    })

    let i = 2
    setInterval(() => {
      lis.forEach((item) => {
        item.style.opacity = 0.5
      })
      lis[i].style.opacity = 1
      i = (i + 1) % lis.length
    }, 1000)
  }

  function p4() {
    const backBtn = $('.p4 .back')
    const lis = $all('.p4 .list li')
    const p4Item = $('.p4-item')
    const title = $('.p4 .title img')
    const itemTag = $('.p4-item .text span')
    const itemImg = $('.p4-item .leftImg')
    const okBtn = $('.p4-item .ok')
    const continueBtn = $('.p4-item .continue')
    const tip = $('.p4-item .tip')
    const textDom = $('.p4-item .text')

    title.style.transform = 'scale(1)'
    let tag, text, stopWriting
    lis.forEach((item, i) => {
      item.style.transitionDelay = i + 's'
      item.style.opacity = 1
      item.onclick = () => {
        const img = item.children[0].src
        itemImg.src = img

        tag = decodeURI(img.match(/.*\/(.*)\.png/)[1])
        text = `童年对我来说不再是${tag}了小时候的我一直希望自己可以快点长大；现在的我则是希望自己可以再年轻一些`
        stopWriting = typeWriting(textDom, text)

        p4Item.$fadeIn()
        backBtn.$fadeOut()
      }
    })
    okBtn.onclick = () => {
      okBtn.$hide()
      continueBtn.$show()
      tip.style.opacity = 1
      stopWriting()
      textDom.innerText = text
    }
    continueBtn.onclick = () => {
      okBtn.$show()
      backBtn.$fadeIn()
      continueBtn.$hide()
      tip.style.opacity = 0
      p4Item.$fadeOut()
    }
  }

  /**
   * 打字效果
   * @param {HTMLElement} dom 显示元素
   * @param {str} text 文本
   */
  function typeWriting(dom, text) {
    let index = 0
    let timer = setInterval(() => {
      index++
      dom.innerHTML = text.slice(0, index)
      if (index >= text.length) {
        clearInterval(timer)
      }
    }, 100)

    return () => void clearInterval(timer)
  }

  function p5() {
    const lis = $all('.p5 .list li:nth-child(3) div img')
    lis.forEach(item => {
      item.onclick = function() {
        // const { left, top } = item.getBoundingClientRect()
        // item.style.setProperty('--left', left)
        // item.style.setProperty('--top', top)
        item.classList.add('active')
      }
    })
  }

  function p6() {
    setList()
    setTabDot()
    window.ontouchstart = (e) => {
      const y = e.changedTouches[0].clientY
      window.ontouchend = (e) => {
        const endY = e.changedTouches[0].clientY
        let flag
        if (Math.abs(endY - y) > 50) {
          const liActive = $('.p6 .list .active')
          const tabActive = $('.p6 .tabs .active')
          const i = liActive.index
          if (endY - y > 0) {
            console.log('下滑')
            if (!liActive.previousElementSibling) return
            liActive.classList.remove('active')
            tabActive.classList.remove('active')
            liActive.previousElementSibling.classList.add('active')
            tabActive.previousElementSibling.classList.add('active')
            flag = true
          } else {
            console.log('上滑')
            if (!liActive.nextElementSibling) return
            liActive.classList.remove('active')
            tabActive.classList.remove('active')
            liActive.nextElementSibling.classList.add('active')
            tabActive.nextElementSibling.classList.add('active')
            flag = false
          }
          setList(flag)
          setTabDot()
        }
      }
    }
  }

  function setTabDot() {
    const {
      top
    } = $('.p6 .tabs .active').getBoundingClientRect()
    const tabDot = $('.p6 .tab-dot')
    tabDot.style.top = top + 3 + 'px'
  }

  function setList(flag) {
    const lis = $all('.p6 .list li')
    lis.forEach((item, i) => item.index = i)
    const liActive = $('.p6 .list .active')
    const right = 10
    lis.forEach((item, i) => {
      const dif = Math.abs(liActive.index - i)
      const height = liActive.clientHeight
      item.style.transform = `translate(${right * dif}vw`
      // item.style.transform = `translate(${right * dif}vw, ${(liActive.index - i) * 50}%)`
      item.style.zIndex = +`-${dif}` + lis.length
    })
  }

  return {
    next,
    prev
  }
})({
  Audio
})
